<template>
  <div class="group-user-select">
    <div class="certificate-num">
      <div class="certificate">{{ title }}</div>
      <div>已选：<span class="num">{{ checkedList.list.length }}</span></div>
    </div>
    <div style="margin-top: 10px">
      <el-checkbox-group v-model="checkedList.list">
        <el-checkbox :label="item.id" v-for="(item, index) in copyData" :key="index">{{ item.label }}</el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, watchEffect, watch, computed, nextTick } from "vue"
const props = defineProps<{
  title: string,
  users: Array<any>,
  filterKey: string
}>()

const emit = defineEmits(['update'])

let checkedList = reactive({
  list: [],
})

watch(() => props.users, (val) => {
  nextTick(() => {
    checkedList.list.forEach((item, index) => {
      if (!val.includes(item)) {
        checkedList.list.splice(index, 1)
      }
    })
  })
}, { deep: true, flush: "sync" })


watchEffect(() => {
  emit('update', checkedList.list)
})

// 过滤
const copyData = computed(() => {
  if(props.filterKey) {
    return props.users.filter(item => item.label.includes(props.filterKey))
  }else {
    return props.users
  }
})


</script>

<style lang="less" scoped>
.group-user-select {
  margin: 5px 0;

  .el-checkbox {
    width: 90%;
  }

  .certificate-num {
    display: flex;
    align-items: center;

    .certificate {
      padding: 3px 8px;
      background: #e3edf8;
      border: 1px solid rgba(128, 128, 253, 0.48);
      color: #337fcd;
      margin-right: 10px;
      border-radius: 3px;
    }

    .num {
      font-size: 15px;
      color: #337fcd;
    }
  }

}
</style>
